<!doctype html>
<html>
  <head>
    <style>
      body {
        width: 100%;
        margin: 0;
        padding: 0 1em;
        box-sizing: border-box;
        font: 13px Arial;
      }
    </style>
  </head>

  <body>
    <h1>Idle API Demonstration</h1>
    <h2>Current state</h2>
    <p>
      Idle threshold:
      <select id="idle-threshold">
        <option selected value="15">15</option>
        <option value="30">30</option>
        <option value="60">60</option>
      </select>
    </p>

    <p>
      <code
        >chrome.idle.queryState(<strong id="idle-set-threshold"></strong>,
        ...);</code
      >
      -
      <span id="idle-state"></span>
    </p>
    <p>Last state change: <span id="idle-laststate"></span></p>

    <h2>Idle changes:</h2>
    <ul id="idle-history"></ul>
    <script src="history.js"></script>
  </body>
</html>
